<template>
  <div class="container-wf">
    <div class="c-header">
      <i class="iconfont icon-tishi1"></i>
      <i
        class="iconfont icon-icon-mianxing_fuzhi_cunchu-13"
        @click="SaveConfig"
      ></i>
    </div>
    <div class="c-main" ref="wfcontainer">
      <div class="item-1">
        <p class="item-1-title">价格浮动配置审批</p>
        <p class="item-1-content">{{ userList }}</p>
      </div>
    </div>
    <div ref="customMenu" class="context-menu">
      <div v-if="mainMenuShow">
        <p class="menu-node menu-node-header" @click="AddNode">添加节点</p>
        <p class="menu-node">查看数据</p>
        <p class="menu-node">检查数据</p>
        <p class="menu-node">全选</p>
      </div>
      <div v-if="contentMainShow">
        <p class="menu-node menu-node-header" @click="DelNode">删除</p>
        <p class="menu-node">编辑基本信息</p>
        <p class="menu-node">配置审批权限</p>
        <p class="menu-node">配置附加动作</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      container: null,
      customMenu: null,
      mainMenuShow: true,
      contentMainShow: false,
      userList: ["管理员", "张三", "李四", "小李子", "诺兰"],
      hitRegion: ["c-main", "item-1"],
      selectedNode: null
    };
  },
  mounted() {
    this.InitDom();
  },
  methods: {
    InitDom() {
      // 获取自定义菜单元素
      this.container = this.$refs.wfcontainer;
      this.customMenu = this.$refs.customMenu;

      // 只监听某一个元素的右键事件
      this.container.addEventListener("contextmenu", this.contextShow);
  
      // 监听全局点击事件，隐藏菜单
      document.addEventListener("click", this.contextCancel);

      // 重置子节点鼠标右键菜单
      let item = document.querySelector(".item-1");
      item.addEventListener("contextmenu", this.contextShow);

      // 给container中已存在的节点绑定事件处理程序
      let nodes = this.container.children;
      for(let i = 0;i<nodes.length;i++){
        if(nodes[i].classList.contains('item-1')){
          this.InitNodeEvent(nodes[i]);
        }
      }
    },
    contextShow(e) {
      // 重置为默认状态
      this.mainMenuShow = false;
      this.contentMainShow = false;

      // 禁止默认右键菜单
      e.preventDefault();
      // 获取鼠标点击的元素
      const clickedElement = e.target;
      const parentElement = e.target.parentElement;
      // console.log('parent element: ',e.target.parentElement)

      if (clickedElement.classList.contains("item-1")) {
        this.contentMainShow = true;
        this.selectedNode = clickedElement;
      } else if(parentElement.classList.contains('item-1')){
        this.contentMainShow = true;
        this.selectedNode = parentElement;
      } else if (clickedElement.classList.contains("c-main")) {
        this.mainMenuShow = true;
        this.selectedNode = null;
      } else {
        this.selectedNode = null;
      }
     
      // 获取鼠标点击位置
      const mouseX = e.clientX;
      const mouseY = e.clientY;

      // 输出被点击的元素类型
      // console.log("Clicked element:", clickedElement);

      // 显示自定义菜单
      this.customMenu.style.left = mouseX + "px";
      this.customMenu.style.top = mouseY + "px";
      this.customMenu.style.display = "block";
    },
    contextCancel(e) {
      this.customMenu.style.display = "none";
    },
    InitNodeEvent(item) {
      // 初始位置
      var offsetX = 0;
      var offsetY = 0;
      var isDragging = false;

      // 当鼠标按下时，开始拖动
      item.addEventListener("mousedown", (e) => {
        isDragging = true;
        offsetX = e.clientX - item.offsetLeft; // 获取鼠标按下时与控件左边缘的距离
        offsetY = e.clientY - item.offsetTop; // 获取鼠标按下时与控件上边缘的距离

        // 禁止选中文本，避免拖动时出现文本选中的问题
        item.style.userSelect = "none";
      });

      // 当鼠标移动时，如果正在拖动，则更新控件的位置
      item.addEventListener("mousemove", (e) => {
        if (isDragging) {
          var x = e.clientX - offsetX; // 计算新的 X 坐标
          var y = e.clientY - offsetY; // 计算新的 Y 坐标
          item.style.left = x + "px"; // 更新控件的左侧位置
          item.style.top = y + "px"; // 更新控件的顶部位置
        }
      });

      // 当鼠标松开时，停止拖动
      item.addEventListener("mouseup", (e) => {
        isDragging = false;
        item.style.userSelect = "auto"; // 恢复文本选中
      });
    },
    AddNode(e){
      let hitElem = e.target;
      const mouseX = hitElem.clientX;
      const mouseY = hitElem.clientY;

      let div = document.createElement('div');
      div.classList.add('item-1');
      div.style.width = '200px';
      div.style.height = '80px';
      div.style.left = mouseX + 'px';
      div.style.top = mouseY + 'px';

      let p = document.createElement('p');
      p.classList.add('item-1-title');
      p.innerText = "新建审批节点";

      let p2 = document.createElement('p');
      p2.classList.add('item-1-content');
      p2.innerText = this.userList;

      div.appendChild(p);
      div.appendChild(p2);

      this.InitNodeEvent(div);
      this.container.appendChild(div);
    },
    DelNode(){
      if(this.selectedNode!=null){
        this.container.removeChild(this.selectedNode);
      }
    },
    SaveConfig() {
      /*
        this.$message({
            message: '操作成功',
            type: 'success',
            duration: 5000,
            showClose: true,
            customClass: 'my-custom-message',
            center: true
        });
     */
      this.$message.success("内容已保存");
    },
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听
    this.container.removeEventListener('contextmenu',this.contextShow);
    this.container.removeEventListener('click',this.contextCancel);
  },
};
</script>

<style lang="scss" scoped>
.container-wf {
  width: 100%;
  height: calc(100vh - 70px);
  border-radius: 4px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);

  .c-header {
    height: 5%;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .iconfont {
      margin: 0 25px 0 25px;
      font-size: 30px;
      cursor: pointer;
    }
    .iconfont:hover {
      color: orange !important;
    }
  }
}
</style>